<!-- 
  with-header 是否带头部
 -->
<template>
  <el-drawer
    class="drawerBaseRoot"
    v-model="visible"
    :show-close="false"
    :size="sizeComp"
    :direction="direction"
    @close="closed"
  >
    <!-- 头部 -->
    <template #header="{ close, titleId, titleClass }">
      <div :id="titleId" class="d-title">
        <slot name="titleBefore"></slot>
        <span :class="[titleClass, 'drawerTitle']">{{ props.title }}</span>
        <el-tooltip effect="dark" :content="titleTip" placement="bottom" v-if="titleTip">
          <el-icon class="titleTip"><Warning /></el-icon>
        </el-tooltip>
      </div>
      <div class="d-action">
        <img
          src="@/assets/image/fullscreen_new.png"
          @click="handleFullscreen"
          style="margin-right: 10px"
        />
        <img src="@/assets/image/close.png" @click="close" />
      </div>
    </template>
    <!-- 内容 -->
    <div class="d-body" v-loading="loading">
      <slot />
    </div>
    <!-- 底部 -->
    <template #footer v-if="props.footer">
      <div class="d-footer">
        <op-button-list
          class="footBtn"
          @buttonClick="buttonClick"
          :button-list="buttonListComp"
          :commonStyle="{ width: '104px', height: '28px' }"
          v-bind="{ ...buttonConfig }"
        ></op-button-list>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
const emit = defineEmits(['close', 'closed', 'confirm', 'isfullscreen']);
const props = defineProps({
  footer: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  titleTip: {
    type: String,
    default: '',
  },
  fullscreen: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  size: {
    type: [Number, String],
    default: '30%',
  },
  buttonList: {
    type: Array,
    default: () => [],
  },
  confirmLabel: {
    type: String,
    default: 'Confirm',
  },
  direction: {
    type: String,
    default: 'rtl',
  },
  bodyStyle: {
    type: Object,
    default: () => ({}),
  },
  buttonConfig: {
    type: Object,
    default: () => ({}),
  },
});

const directionVal = ref(props.direction);
const visible = ref(false);
const fullscreenValue = ref(props.fullscreen);
const tempData = ref(null);

function init(row) {
  tempData.value = row || null;
  visible.value = true;
}

const destroy = () => {
  visible.value = false;
};
const close = () => emit('close');

const closed = () => emit('closed');

const buttonClick = ({ prop }) => {
  switch (prop) {
    case 'cancel':
      destroy();
      close();
      break;
    case 'confirm':
      emit('confirm', tempData.value);
      break;
    default:
      emit('confirm', tempData.value, prop);
      break;
  }
};

const sizeComp = computed(() => {
  return fullscreenValue.value ? '100%' : props.size;
});

const buttonListComp = computed(() => {
  if (props?.buttonList) {
    return props.buttonList;
  } else {
    return [
      { prop: 'confirm', label: props.confirmLabel, type: 'primary' },
      { prop: 'cancel', label: 'Cancel', type: '' },
    ];
  }
});

function handleFullscreen() {
  fullscreenValue.value = !fullscreenValue.value;
  emit('isfullscreen', fullscreenValue.value);
}

defineExpose({ init, destroy });
</script>

<style lang="scss">
.drawerBaseRoot {
  .el-drawer__header {
    height: 50px;
    margin-bottom: 0;
    padding: 0 15px;
    box-shadow: inset 0px -1px 0px 0px #cccccc;
  }
}
</style>

<style lang="scss" scoped>
.d-title {
  display: flex;
  align-items: center;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #606266;
  font-size: 16px;
  .drawerTitle {
    flex: unset;
  }

  .titleTip {
    color: #127bbc;
    margin-left: 10px;
    cursor: pointer;
  }
}
.d-action {
  display: flex;
  align-items: center;
  img {
    width: 24px;
    cursor: pointer;
  }
}
.footBtn {
  justify-content: start;
  // flex-direction: row-reverse;
}
</style>
